// 导入 路由相关组件库
import {
  BrowserRouter as Router,
  Route,
  Link,
  NavLink,
} from 'react-router-dom';
import { Outer } from './Outer';

export const App2 = () => {
  return (
    <Router>
      <Link to={'/first'}>页面一</Link>
      {/* <NavLink to={'/second'} activeClassName={'xxx-active'}>
        页面二
      </NavLink> */}
      <br />
      <Route exact path={'/'} component={Home} />
      <br />
      {/* <div>1111</div> */}
      <Route path={'/first'} component={First} />
      {/* <div>2222</div> */}
      {/* <Outer /> */}
    </Router>
  );
};

// 为什么后定义的 First 组件可以在 <Route path={'/first'} component={First} /> 中渲染
const First = () => {
  return (
    <div>
      <div>
        <Link to={'/first/a'}>A</Link>
        <Link to={'/first/b'}>B</Link>
        <Link to={'/first/c'}>C</Link>
      </div>
      <Route path={'/first/a'} component={() => <div>first/a</div>}></Route>
      <Route path={'/first/b'} component={() => <div>first/b</div>}></Route>
      <Route path={'/first/c'} component={() => <div>first/c</div>}></Route>
    </div>
  );
};
const Second = () => 'Second组件';
const Home = () => 'Home组件';
